<script lang="ts" setup>
import draggableBlock from './draggable-block.vue';
</script>

<template>
    <div :class="$style.warp">
        <div :class="$style.joystickContainer">
            <draggableBlock @ondrag="onDragUpdate"></draggableBlock>
        </div>
    </div>

</template>

<script lang="ts">
import * as Data from '../data/data';

interface IData { }

export default {
    data():IData {
        return {
        }
    },
    methods: {
        onDragUpdate(offset){
            console.log(777,offset);
        }
    }

}
</script>

<style module>
.warp {
    pointer-events: all;
}
.joystickContainer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 8em;
    height: 8em;
    margin-left: 5em;
    margin-bottom: 2em;
    background-color: rgba(0,0,0,0);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>